<template>
  <Row>
    <i-col span="16">
      <Row v-for="i in (customIconList.length / 3)" :key="`custom-icon-row-${i}`">
        <i-col span="8" v-for="item in customIconList.slice((i - 1) * 3, i * 3)" :key="`custom-icon-${item}`">
          <Card style="margin: 0 5px 5px; text-align: center;">
            <icons :size="30" :type="item"/>
            <p class="icon-code">&lt;Icons :size="30" type="{{ item }}"&gt;</p>
            <p>&lt;CommonIcon :size="30" type="_{{ item }}"&gt;</p>
          </Card>
        </i-col>
      </Row>
      <Row>
        <i-col>
          <Card style="margin: 0 5px 5px; text-align: center;">
            <common-icon :size="30" type="ionic"/>
            <p class="icon-code">iView内置图标</p>
            <p>&lt;CommonIcon :size="30" type="ionic"&gt;</p>
          </Card>
        </i-col>
      </Row>
    </i-col>
    <i-col span="8">
      <Card>
        <p class="intro-p">
          <Icon style="margin-right: 10px;" :size="10" type="heart"/>
          Icons组件支持自定义图标的显示，具体自定义图标字体文件的制作请参考文档。
        </p>
        <p class="intro-p">
          <Icon style="margin-right: 10px;" :size="10" type="heart"/>
          CommonIcon组件同时支持iView内置图标类型和自定义图标类型，为了区别这两种类型，需要在自定义图标名称前加下划线"_"
        </p>
      </Card>
    </i-col>
  </Row>
</template>

<script>
  import Icons from '_c/icons'
  import CommonIcon from '_c/common-icon'

  export default {
    name: 'icons_pages',
    components: {
      Icons,
      CommonIcon
    },
    data () {
      return {
        customIconList: [
          'woman',
          'man',
          'smile',
          'meh',
          'frown',
          'bear'
        ]
      }
    }
  }
</script>

<style lang="less">
  .icon-code {
    margin: 20px 0 10px;
  }

  .intro-p {
    margin-bottom: 10px;
  }
</style>
